<template>
	<div id="tag" class="columns">
		<!-- 左边: 当前标签对应的帖子列表 -->
		<div class="column is-three-quarters">
			<el-card class="box-card" shadow="never">
				<div slot="header" class="">
					🔍 检索到 
					<span class="has-text-info">{{ posts.length }}</span> 篇有关
					<span class="has-text-info">{{ this.$route.params.tagName }}</span>的话题
				</div>

				<div class="text item">
				<article 
					class="media mt-3"
					v-for="(post, index) in posts" 
					:key="index" 
				>
					<div class="media-content">
						<!-- 帖子标题 -->
						<div class="content">
							<el-tooltip class="item" effect="dark" :content="post.title" placement="top">
								<router-link :to="{ name: 'post-detail', params: { postId: post.id } }">
									{{ post.title }}
								</router-link>
							</el-tooltip>
						</div>

						<!-- 发帖时间 | 浏览量 | 评论数 -->
						<nav class="level has-text-grey is-size-7">
							<div class="level-left">
								<!-- 发帖时间 -->
								<span>发布于:{{ dayjs(post.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
								<!-- 浏览量 -->
								<span class="mx-3">浏览量: {{ post.viewNum }}</span>
								<!-- 评论数 -->
								<span>评论:{{ post.commentNum }}</span>
							</div>
						</nav>
					</div>
				</article>
				</div>
			</el-card>
		</div>

		<!-- 右边: 关于标签 & 热门标签 -->
		<div class="column is-one-quarters">
			<!-- 关于标签 -->
			<el-card class="box-card" shadow="hover">
				<div slot="header" class="clearfix">🤙 关于标签</div>
				<div>
					<ul>
						<li class="content">标签由平台用户发布使用</li>
						<li class="content">系统每周会定时清理无用标签</li>
					</ul>
				</div>
			</el-card>
			<!-- 热门标签 -->
			<el-card shadow="hover">
				<div slot="header">🏷 热门标签</div>
				<div>
					<ul>
						<li v-for="(tag, index) in otherHotTags" :key="index" style="padding: 6px 0">
							<router-link :to="{ name: 'tag' , params: { tagName: tag.tagName } }">
								<span v-if="index < 9" class="tag">
									0{{ parseInt(index) + 1 }}
								</span>
								<span v-else class="tag">
									{{ parseInt(index) + 1 }}
								</span>
								{{ tag.tagName }}
							</router-link>
						</li>
					</ul>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { fetchPostsByTagName } from '@/api/tag'

export default {
  	name: 'Tag',

	data() {
		return {
			// 当前 tag 对应的帖子列表
			posts: [],

			// 最热 tag 列表
			otherHotTags: [],

			pageParams: {
				tagName: this.$route.params.tagName,
				pageNum: 1,
				pageSize: 10
			}
		}
	},

	created() {
		this.getPostsByTagName()
	},

	methods: {
		getPostsByTagName() {
			fetchPostsByTagName(this.pageParams).then(response => {
				// 获取当前 tag 对应的帖子列表
				this.posts = response.data.posts.records
				// 最热 tag 列表
				this.otherHotTags = response.data.otherHotTags.records
			})
		}
	}
}
</script>

<style scoped>
#tag {
  	min-height: 500px;
}
</style>
